<template>
	<view>
		<view class="order">
			<view class="order-head">
				<img class="order-icon" src="https://cashier.sandpay.com.cn/static/fastpay/image/money.png">
				<span class="order-title">应付金额</span>
				<label class="order-val" id="pay_amount">{{price}}</label>
				<view class="order-show-wap">
					<span class="order-text" style="display: none;">订单详情</span>
					<img class="order-down" src="https://cashier.sandpay.com.cn/static/fastpay/image/down.png">
				</view>
			</view>
		</view>
		<view class="ipt-form">
			<view class="ipt-inner">
				<view class="ipt-item">
					<view class="ipt-lab">卡 &nbsp;&nbsp; 号：</view>
					<input
						class="ipt-txt"
						type="number"
						:value="settleAcct"
						placeholder="银行卡卡号"
						data-key="settleAcct"
						@input="inputChange"
						autocomplete="off" 
						style="height:32px;width: 400upx;"
					/>
				</view>
				
				<view class="ipt-item">
					<view class="ipt-lab">姓 &nbsp;&nbsp; 名：</view>
					<input
						class="ipt-txt"
						type="text"
						:value="settleAcctNm"
						placeholder="真实姓名"
						data-key="settleAcctNm"
						@input="inputChange"
						autocomplete="off" 
						style="height:32px;width: 400upx;"
					/>
				</view>
				<view class="ipt-stat"><i></i><label></label></view>
				<view class="ipt-item">
					<view class="ipt-lab">身份证：</view>
					<input
						class="ipt-txt"
						type="text"
						:value="licenceNo"
						placeholder="身份证号码"
						data-key="licenceNo"
						@input="inputChange"
						autocomplete="off" 
						maxlength="18"
						style="height:32px;width: 400upx;"
					/>
				</view>
				<view class="ipt-stat"><i></i><label></label></view>
				<view class="ipt-item">
					<view class="ipt-lab">手机号：</view>
					<input
						class="ipt-txt"
						type="text"
						:value="commTel"
						placeholder="银行预留手机号"
						data-key="commTel"
						@input="inputChange"
						autocomplete="off" 
						maxlength="11"
						style="height:32px;width: 400upx;"
					/>
				</view>
				<view class="ipt-item" style="height: 70upx; line-height: 70upx;">
					<view style="color:#ff0000;">信用卡支付填写下面信息（储蓄卡可不填）</view>
				</view>
				<view class="ipt-item">
					<view class="ipt-lab">有效期：</view>
					<input
						class="ipt-txt"
						type="text"
						:value="validDay"
						placeholder="有效期22年9月(例:0922)"
						data-key="validDay"
						@input="inputChange"
						autocomplete="off"
						maxlength="4"
						style="height:32px;width: 400upx;"
					/>
				</view>
				<view class="ipt-item">
					<view class="ipt-lab">CVV2：</view>
					<input
						class="ipt-txt"
						type="text"
						:value="cvv2"
						placeholder="请输入后三位CVV2"
						data-key="cvv2"
						@input="inputChange"
						autocomplete="off" 
						maxlength="3"
						style="height:32px;width: 400upx;"
					/>
				</view>
				<view class="ipt-stat"><i></i><label></label></view>
				<view class="ipt-item">
					<view class="ipt-lab">验证码：</view>
					<input
						class="ipt-txt"
						type="text"
						:value="verCode"
						placeholder="验证码"
						data-key="verCode"
						@input="inputChange"
						autocomplete="off" 
						maxlength="11"
						style="height:32px"
					/>
					<view :class="verCodeClass" @click="getVerCode()">获取验证码</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="pay-inner">
				<view :class="btnClass" @click="bindAndPay()">
					<text>{{btnTitle}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				
				token: '',
				orderid: '',
				orderInfo: {},
				userInfo: {},
				paybankInfo: {},
				price: 0,
				
				licenceNo: '',
				settleAcctNm: '',
				settleAcct: '',
				commTel: '',
				validDay: '',
				cvv2: '',
				
				adddata1: '',
				verCode: '',
				
				verCodeClass: 'ipt-code',
				verCodeBtnState: true,
				
				btnTitle: '支付',
				btnClass: 'btn-pay',
				btnState: false
			};
		},
		onLoad(option) {
			this.token = this.$api.get('token');
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
				return;
			}
		
			//接收传值
			console.log('option', option);
			let orderid = option.orderid;
			if (orderid && orderid != undefined) {
				//获取用户信息
				this.getUserinfo();
				//获取订单信息
				this.orderid = orderid;
				//获取订单信息
				this.getOrderInfo();
				//获取银行充值信息
				this.getPaybankinfo();
			}
		},
		methods: {
			//获取订单信息
			getOrderInfo() {
				const param = {
					token: this.token,
					id: this.orderid
				};
				
				this.$http.request('Order', 'orderdetail', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.orderInfo = res.data.data;
							this.price = res.data.data.actualprice;
							
							let _this = this;
							if (res.data.data.paystatus != 0) {
								uni.navigateTo({
									url: '/pages/order/paySuccess',
									success: function(res) {
										clearInterval(_this.timer);
										_this.timer = null;
									}
								});
							}
							
						}
					}
				});
			},
			//获取用户信息
			async getUserinfo() {
				const param_userinfo = {
					token: this.token
				};
				await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.userInfo = res.data.data;
						}
					}
				});
			},
			//获取银行卡信息
			async getPaybankinfo() {
				const param_userinfo = {
					token: this.token
				};
				await this.$http.request('User', 'paybankinfo', 'GET', param_userinfo, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.paybankInfo = res.data.data;
							
							this.licenceNo = res.data.data.licenceNo;
							this.settleAcctNm = res.data.data.settleAcctNm;
							this.settleAcct = res.data.data.settleAcct;
							this.commTel = res.data.data.commTel;
							this.validDay = res.data.data.validDay;
							this.cvv2 = res.data.data.cvv2;
						}
					}
				});
			},
			
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			
			//发送验证码
			getVerCode: function() {
				if (!this.verCodeBtnState) {
					return;
				}
				
				this.verCodeBtnState = false;
				
				if (this.price <= 0){
					this.verCodeBtnState = true;
					this.$helper.toast('充值金额不能为零', '', '/static/toast/fail-circle.png');
					return;
				}
				
				if (!this.settleAcct) {
					this.verCodeBtnState = true;
					this.$helper.toast('卡号输入错误', '', '/static/toast/fail-circle.png');
					return;
				}
				
				if (!this.settleAcctNm){
					this.verCodeBtnState = true;
					this.$helper.toast('姓名输入错误', '', '/static/toast/fail-circle.png');
					return;
				}
				
				if (18 !== this.licenceNo.trim().length) {
					this.verCodeBtnState = true;
					this.$helper.toast('身份证号码输入错误', '', '/static/toast/fail-circle.png');
					return;
				}
				
				if (11 !== this.commTel.trim().length) {
					this.verCodeBtnState = true;
					this.$helper.toast('手机号输入错误', '', '/static/toast/fail-circle.png');
					return;
				}
				
				const param = {};
				param.token = this.token;
				param.orderid = this.orderid;
				param.licenceNo = this.licenceNo;
				param.settleAcctNm = this.settleAcctNm;
				param.settleAcct = this.settleAcct;
				param.commTel = this.commTel;
				param.validDay = this.validDay;
				param.cvv2 = this.cvv2;
				this.$http.request('Huijupay', 'fastPay', 'POST', param, res => {
					
					this.verCodeBtnState = true;
					
					if (res.status == 1) {
						if (res.data.error == 0) {
							if ('0000' === res.data.data.respCode) {
								this.btnClass = this.btnClass + ' btn-sel';
								this.btnState = true;
								this.verCodeClass = this.verCodeClass + ' ipt-code-disabled';
								this.verCodeBtnState = false;
								
								this.adddata1 = res.data.data.adddata1;
								
								uni.showToast({
									title: `验证码已发送`,
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
							}
						}
					}
				});
				
			},
			//支付
			bindAndPay: function() {
				if (!this.btnState) {
					return;
				}

				if (!this.verCode){
					this.$helper.toast('验证码不能为空', '', '/static/toast/fail-circle.png');
					return;
				}
				
				const param = {};
				param.token = this.token;
				param.orderid = this.orderid;
				param.adddata1 = this.adddata1;
				param.vercode = this.verCode;
				this.$http.request('Huijupay', 'fastPayVerCode', 'POST', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							if (100 == res.data.data.transStatus) {
								uni.showToast({
									title: '支付成功',
									icon: 'none',
									duration: 2000
								});
								
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages/order/paySuccess',
									});
								}, 1000);
								return;
								
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
							}
						}
					}
				});
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.banner {
		position: relative;
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #314675;
		letter-spacing: 1px;
		border-bottom: 2px solid #ddd;

		.ban-inner {
			.logo {
				position: absolute;
				top: 10px;
				left: 10px;
				height: 30px;
				width: 126px;
			}
		}
	}

	.order {
		width: 100%;
		overflow: hidden;

		.order-head {
			position: relative;
			width: 100%;
			height: 55px;
			background-color: #2476e9;
			font-size: 12px;

			.order-icon {
				width: 45px;
				height: 45px;
				margin-top: 5px;
				margin-left: 20px;
				float: left;
			}

			.order-title {
				position: absolute;
				top: 8px;
				left: 70px;
				color: #fff;
			}

			.order-val {
				position: absolute;
				top: 25px;
				left: 70px;
				z-index: 2;
				font-size: 18px;
				font-weight: bold;
				color: #fff;
				letter-spacing: 1px;
			}

			.order-show-wap {
				.order-text {
					position: absolute;
					display: block;
					right: 40px;
					width: 30px;
					color: #fff;
					height: 35px;
					top: 10px;
				}

				.order-down {
					position: absolute;
					right: 20px;
					top: 22px;
					width: 15px;
				}
			}
		}

		.order-deil {
			width: 100%;
			background-color: #f3f3f3;
			padding-top: 10px;
			padding-bottom: 10px;
			overflow: hidden;
			display: none;

			.order-item {
				width: 100%;
				color: #999;
				margin-top: 2px;
				margin-bottom: 2px;
				float: left;
			}
		}
	}

	.ipt-form {
		width: 100%;
		float: left;

		.ipt-inner {
			margin-left: 20px;
			margin-right: 20px;

			.ipt-item {
				position: relative;
				width: 100%;
				height: 60px;
				border-bottom: 1px solid #d0d6dd;
				float: left;

				.ipt-code {
					position: absolute;
					top: 11px;
					right: 0;
					width: 85px;
					height: 36px;
					line-height: 36px;
					text-align: center;
					background-color: #488fd7;
					cursor: pointer;
					color: #fff;
					font-size: 12px;
				}

				.ipt-code-disabled {
					background-color: #eef2f8 !important;
					color: #333 !important;
				}
			}

			.ipt-lab {
				width: 70px;
				font-size: 14px;
				margin-top: 20px;
				float: left;
			}

			.ipt-txt {
				width: 45%;
				/* height: 60px; */
				height: 30px;
				margin-top: 15px;
				line-height: 30px;
				font-size: 14px;
				border: 0;
				outline: none;
				float: left;
				padding-left: 10px;
				background: white;
			}

			.ipt-txt::-webkit-input-placeholder {
				line-height: 30px;
			}

			.ipt-date {
				position: absolute;
				width: 30%;
				line-height: 30px;
				margin-top: 15px;
				margin-left: 10px;
				font-size: 14px;
				border: 0;
				outline: none;
				float: left;
			}

			.ipt-db {
				position: absolute;
				font-size: 14px;
				line-height: 60px;
			}

			.ipt-a {
				position: absolute;
				top: 20px;
				right: 0;
				font-size: 14px;
				color: #25b4e9;
				cursor: pointer;
			}

			.ipt-img {
				position: absolute;
				top: 20px;
				right: -520px;
				width: 500px;
				font-size: 14px;
				color: #f64a60;
			}

			.ipt-info {
				position: relative;
				width: 100%;
				height: 50px;
				line-height: 50px;
				float: left;
			}

			.ipt-il {
				color: #25b4e9;
			}

			.ipt-ir {
				position: absolute;
				right: 0;
				color: #25b4e9;
			}

			.bank-type {
				width: 40px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				-ms-border-radius: 2px;
				-o-border-radius: 2px;
				border-radius: 2px;
				margin-top: 17px;
				margin-left: 10px;
				float: right;
				position: relative;
				z-index: 10;

				.bank-card-box {
					height: 44px;
					line-height: 44px;
					clear: both;
					border-bottom: 1px solid #d0d6dd;
					font-size: 14px;
				}

				.bank-pic {
					width: 20px;
					vertical-align: middle;
					margin: 0 8px 0 80px;
					position: relative;
					top: -2px;
				}

				.bt-con {
					position: absolute;
					top: 0;
					right: 0;
					width: 80px;
					height: 28px;
					border: 1px solid #579fe9;
					cursor: pointer;

					.bt-val {
						position: absolute;
						top: 0;
						left: 10px;
						color: #488fd7;
						line-height: 28px;
						font-size: 12px;
					}

					.bt-chos {
						position: absolute;
						top: -3px;
						right: 5px;
						width: 20px;
						height: 34px;
						background-color: #579fe9;
					}

					.bt-cb {
						display: none;
					}
				}
			}
		}
	}

	.pay {
		width: 100%;
		margin-top: 20px;
		float: left;

		.pay-inner {
			margin-left: 20px;
			margin-right: 20px;
		}

		.btn-pay {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			color: #999;
			letter-spacing: 1px;
			background-color: #eee;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			-ms-border-radius: 2px;
			-o-border-radius: 2px;
			border-radius: 2px;
			float: left;
		}

		.btn-sel {
			color: #fff;
			background-color: #488fd7;
			cursor: pointer;
		}
	}
</style>
